<template>
    <div id="newarea">
        <div style="margin-bottom: 20px;">
            <!-- <el-button type="success" @click="updcode()">更新行政区划代码</el-button>
            <el-button type="success" @click="getbackupList()">获取备份列表</el-button> -->
        </div>
        <el-dialog v-model="dialogShow">
            <el-table :data="backuplist">
                <el-table-column label="操作人" prop="ad_code"></el-table-column>
                <el-table-column label="备份状态">
                    <template #default="scope">
                        <div v-show="scope.row.state == 0">未完成</div>
                        <div v-show="scope.row.state == 1">已完成</div>
                        <div v-show="scope.row.state == 2">已作废</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="danger" @click="stopBackup(scope.row.id, scope.row.state)">终止备份</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <iframe class="m_frame" src="https://www.stats.gov.cn/sj/tjbz/tjyqhdmhcxhfdm/2023/index.html"></iframe>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import $sys from "../../api/sys";
const dialogShow = ref(false);
const page = reactive({
    pagenum: 1,
    pagesize: 999
});
function stopBackup(e, state) {
    if (state != 0) {
        ElMessage({
            message: '该操作已结束!',
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定终止备份?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            $sys.breakBackup(e).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '操作成功!',
                        type: 'success'
                    });
                    getbackupList();
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    });
                }
            });
        }).catch(() => {

        });
    }

}
const backuplist = ref([]);
function getbackupList() {
    $sys.getBackupList(page).then(res => {
        if (res.code == 200) {
            backuplist.value = res.data.result;
            dialogShow.value = true;
        }
    });
}
function updcode() {
    ElMessageBox.confirm(
        '确定进行行政区划更新?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.updCode().then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                });
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    });
}
</script>

<style scoped lang="less">
#newarea {
    padding: 20px 0 0 20px;

    .m_frame {
        position: relative;
        width: 100%;
        height: 70vh;
        border: none;
    }
}
</style>
